﻿@using WebUI.Areas.Admin.Models
@model CourseTableForEditViewModel
@{
	Layout = "~/Areas/Admin/Views/Shared/_AdminContent.cshtml";

	Model.ClazzOptions.Insert(0, new OptionModel
	{
		ID = 0,
		IsSelected = true,
		Text = "请选择班级"
	});
	Model.CourseOptions.Insert(0, new OptionModel
	{
		ID = 0,
		IsSelected = true,
		Text = "请选择课程"
	});
	Model.TeacherOptions.Insert(0, new OptionModel
	{
		ID = 0,
		IsSelected = true,
		Text = "请选择教师"
	});
}
@section head {
	<link href="~/dist/AdminLTE/bower_components/select2/dist/css/select2.min.css" rel="stylesheet" />
	<!-- 重新覆盖掉 select2 所覆盖的主题样式 -->
	<link rel="stylesheet" href="/dist/AdminLTE/dist/css/AdminLTE.min.css">
}
@section body {
	<script src="~/dist/AdminLTE/bower_components/select2/dist/js/select2.full.min.js"></script>
	<script>

		function onComplete(data) {
			$("#js-message").fadeIn();
			var resJson = data.responseJSON;
			if (resJson.code <= 0) {
				$("#js-message").attr("class", "alert alert-danger").find(".message").html(resJson.message)
			} else {
				$("#js-message").attr("class", "alert alert-success").find(".message").html(resJson.message);
			}
			// 3s 后隐藏
			setTimeout(function () {
				$("#js-message").fadeOut("slow");
			}, 3000);
		}

		//Initialize Select2 Elements
		$(".select2").select2();

		$("#js-clazzOptions").change(selectClazz);
		function selectClazz() {
			var $selectedOptions = $("#js-clazzOptions").find("option:selected");
			console.log($selectedOptions);
			var inputHtmlStr = '';
			for (var i = 0; i < $selectedOptions.length; i++) {
				inputHtmlStr += '<input type="hidden" name="ClazzOptions[' + i + '].ID" value="' + $selectedOptions[i].value + '" />';
			}
			$("#js-selectedClazzInput").html(inputHtmlStr);
		}

		$("#js-courseOptions").change(selectCourse);
		function selectCourse() {
			var $selectedOptions = $("#js-courseOptions").find("option:selected");
			console.log($selectedOptions);
			var inputHtmlStr = '';
			for (var i = 0; i < $selectedOptions.length; i++) {
				inputHtmlStr += '<input type="hidden" name="CourseOptions[' + i + '].ID" value="' + $selectedOptions[i].value + '" />';
			}
			$("#js-selectedCourseInput").html(inputHtmlStr);
		}

		$("#js-teacherOptions").change(selectTeacher);
		function selectTeacher() {
			var $selectedOptions = $("#js-courseOptions").find("option:selected");
			console.log($selectedOptions);
			var inputHtmlStr = '';
			for (var i = 0; i < $selectedOptions.length; i++) {
				inputHtmlStr += '<input type="hidden" name="TeacherOptions[' + i + '].ID" value="' + $selectedOptions[i].value + '" />';
			}
			$("#js-selectedTeacherInput").html(inputHtmlStr);
		}
	</script>
}

<!-- start 提示框 -->
@Html.Partial("_MessagePartial")
<!-- end 提示框 -->
<!-- general form elements -->
<div class="box box-primary">
	<div class="box-header with-border">
		<h3 class="box-title">课程表 - 添加</h3>
	</div>
	<!-- /.box-header -->
	<!-- form start -->
	@using (Ajax.BeginForm(new AjaxOptions
	{
		HttpMethod = "Post",
		OnComplete = "onComplete"
	}))
	{
		@Html.HiddenFor(m => m.ID)
		<div class="box-body">
			<div class="form-group">
				<label>班级</label>
				<select id="js-clazzOptions" class="form-control select2" data-placeholder="选择班级" style="width: 100%;">
					@foreach (OptionModel option in Model.ClazzOptions)
					{
						string selectedStr = option.IsSelected ? "selected" : "";
						<option value="@option.ID" @selectedStr>@option.Text</option>
					}
				</select>
			</div>
			<div id="js-selectedClazzInput" class="form-group" style="display: none;">
			</div>
			<div class="form-group">
				<label>课程</label>
				<select id="js-courseOptions" class="form-control select2" data-placeholder="选择课程" style="width: 100%;">
					@foreach (OptionModel option in Model.CourseOptions)
					{
						string selectedStr = option.IsSelected ? "selected" : "";
						<option value="@option.ID" @selectedStr>@option.Text</option>
					}
				</select>
			</div>
			<div id="js-selectedCourseInput" class="form-group" style="display: none;">
			</div>
			<div class="form-group">
				<label>教师</label>
				<select id="js-teacherOptions" class="form-control select2" data-placeholder="选择教师" style="width: 100%;">
					@foreach (OptionModel option in Model.TeacherOptions)
					{
						string selectedStr = option.IsSelected ? "selected" : "";
						<option value="@option.ID" @selectedStr>@option.Text</option>
					}
				</select>
			</div>
			<div id="js-selectedTeacherInput" class="form-group" style="display: none;">
			</div>
		</div>
		<div class="box-footer">
			<div class="btn-group">
				@if (TempData["RedirectUrl"] != null)
				{
					<a class="btn btn-default" href="@TempData["RedirectUrl"].ToString()">返回</a>
				}
				else
				{
					<a class="btn btn-default" href="javascript:history.go(-1);">返回</a>
				}
				<input class="btn btn-primary" type="submit" value="保存" />
			</div>
		</div>
	}
</div>


